<template>
  <div class="MyOrder">
    <MyHeader>
      <span>我的订单</span>
    </MyHeader>
    <div class="MyOrderContent">
      <el-table
        :data="tableObj.temporary"
        stripe
        @row-click="handleRow"
        style="width: 100%"
      >
        <el-table-column prop="index" label="序号" width="120">
        </el-table-column>

        <el-table-column prop="imgPath" label="图片" width="150">
          <template slot-scope="scope">
            <img
              :src="require('/src/assets/img/' + scope.row.imgPath)"
              width="50"
              height="50"
            />
          </template>
        </el-table-column>

        <el-table-column prop="name" label="产品名称" width="100">
        </el-table-column>

        <el-table-column prop="brand" label="品牌" width="100">
        </el-table-column>

        <el-table-column prop="money" label="总价" width="100">
        </el-table-column>

        <el-table-column prop="number" label="数量" width="100">
        </el-table-column>

        <el-table-column prop="username" label="商家" width="100">
        </el-table-column>

        <el-table-column prop="buyTime" label="下单时间" width="160">
        </el-table-column>

        <el-table-column prop="address" label="收货地址" width="200">
        </el-table-column>

        <el-table-column prop="receiver" label="收货人" width="100">
        </el-table-column>

        <el-table-column prop="phone" label="收货人电话" width="120">
        </el-table-column>

        <el-table-column prop="" label="状态" width="180">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="cancelOrder"
              v-if="scope.row.status === 0"
              >取消订单</el-button
            >
            <el-button
              @click="gotoEstimate"
              v-else-if="scope.row.status == 1 && scope.row.estatus == 0"
              type="success"
              >去评价</el-button
            >

            <div
              v-else
              style="
                margin-right: 10px;
                border: none;
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #ddd;
              "
              @click="getEstimationContent"
            >
              已评论
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 商品评价弹出层 -->
      <el-dialog
        title="评价"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="50"
          show-word-limit
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmEstimate">保存</el-button>
        </span>
      </el-dialog>
      <!-- 评价内容弹出层 -->
      <el-dialog
        title="评价"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose"
      >
        <div class="estimation">
          {{ estimationContent }}
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible1 = false"
            >确定</el-button
          >
        </span>
      </el-dialog>
      <Pages :tableObjs="tableObj" v-if="flag" />
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
// import {cookie} from '../../'
import MyHeader from "../../components/MyHeader.vue";
import Pages from "../../components/Pages.vue";
import { getRequest } from "../../util/tools";
import { postRequest, getReq } from "../../util/request";
export default {
  name: "MyOrder",
  data() {
    return {
      tableObj: {
        tableData: [],
        number: 2,
        totalPages: 0,
        currentPage: 1,
        temporary: [],
      },
      userId: "",
      flag: false,
      rowData: "",
      dialogVisible: false,
      dialogVisible1: false,
      textarea: "",
      estimationContent: "",
    };
  },
  components: {
    MyHeader,
    Pages,
  },
  methods: {
    //初始化列表
    init() {
      getRequest(
        `http://localhost:3000/order/selectUserOrder?userId=${this.userId}`,
        this.tableObj
      );
      this.tableObj.tableData = this.tableObj.tableData.reverse();
      this.tableObj.temporary = this.tableObj.temporary.reverse();
      if (this.tableObj.tableData.length) {
        this.flag = true;
      }
    },
    //去评论界面
    gotoEstimate() {
      this.dialogVisible = true;
    },
    // 点击确定评价
    confirmEstimate() {
      if (this.textarea.trim() === "") {
        return;
      } else {
        let estimationPost = postRequest("order/setEstimation", {
          estimation: this.textarea,
          id: this.rowData.id,
        });
        estimationPost.then((res) => {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 3000,
          });
          setTimeout(() => {
            this.dialogVisible = false;
          }, 500);
          this.init();
        });
      }
    },
    //关闭弹出层
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //取消订单
    cancelOrder() {
      //
      setTimeout(async () => {
        if (window.confirm("确定取消订单吗？")) {
          let refund = postRequest("order/refund", {
            userId: this.userId,
            money: this.rowData.money,
          });
          refund.then(() => {
            this.$message({
              type: "success",
              message: "退款成功！",
              duration: 3000,
            });
          });
          let cancelResult = postRequest("order/cancelOrder", {
            id: this.rowData.id,
          });
          cancelResult.then(
            () => {
              this.init();
            },
            (error) => {
              throw error;
            }
          );
        }
      });
    },

    handleRow(row) {
      this.rowData = row;
      // console.log(this.rowData);
    },

    //获取评论内容
    getEstimationContent() {
      setTimeout(() => {
        let content = getReq("order/getEstimation", `?id=${this.rowData.id}`);
        content.then(
          (res) => {
            this.dialogVisible1 = true;
            this.estimationContent = res.data[0].estimation;
            // console.log(res.data);
          },
          (err) => {
            throw err;
          }
        );
      });
    },
  },
  mounted() {
    this.userId = this.$cookie.get("userId");
    //组件挂载渲染数据
    this.init();
  },
  updated() {
    if (this.tableObj.tableData.length) {
      this.flag = true;
    }
  },
};
</script>

<style scoped lang='less'>
.MyOrder {
  width: 100%;
  min-height: 800px;
  background-color: white;
  .MyOrderContent {
    width: 100%;
    min-height: 500px;
    margin-left: 10px;
  }
}
.estimation {
  font-size: 18px;
}
</style>